import { isNotNull } from '../utils';
import route from '../internal/mixins/route';
export default {
  name: 'co-tab',
  mixins: [route],
  inject: [
    'tabClick',
    'getActiveValue',
    'getDefaultVal',
    'addTab',
    'removeTab'
  ],
  props: {
    disabled: Boolean,
    value: {}
  },
  data () {
    return {
      tabVal: 0
    };
  },
  computed: {
    active () {
      return !this.disabled && this.getActiveValue() === this.tabVal;
    }
  },
  created () {
    this.tabVal = isNotNull(this.value) ? this.value : this.getDefaultVal();
    this.addTab(this);
  },
  methods: {
    handleClick (e) {
      this.tabClick(this.tabVal, this);
      this.$emit('click', e);
    }
  },
  beforeDestory () {
    this.removeTab(this);
  },
  watch: {
    active (val) {
      if (val) this.$emit('active');
    },
    value (val) {
      this.tabVal = val;
    }
  },
  render (h) {
    return h(this.to ? 'router-link' : 'div', {
      staticClass: 'co-tab',
      props: {
        ...this.generateRouteProps()
      },
      class: {
        'co-tab--active': this.active
      },
      on: {
        click: this.handleClick
      }
    }, [
      h('div', {
        staticClass: 'co-tab__wrapper'
      }, this.$slots.default)
    ]);
  }
};
